<template>
  <div class="box">
    <div class="pine"></div>
    <div class="box-wrap">
      <div class="close" @click="closeClick">X</div>

      <!-- 业主信息 -->
      <div class="area-title">业主信息</div>
      <div class="info-row">
        <img class="info-img" :src="ownerImgUrl" />
        <div class="info-text">
          <div class="data-item">业主姓名：{{ houseInfo.ownerName }}</div>
          <div class="data-item">业主性别：{{ houseInfo.ownerSex }}</div>
          <div class="data-item" :title="houseInfo.idCard">身份证号：{{ houseInfo.idCard }}</div>
          <div class="data-item">手机号码：{{ houseInfo.phoneNum }}</div>
          <div class="data-item" :title="houseInfo.nativePlace">业主住址：{{ houseInfo.nativePlace }}</div>
        </div>
      </div>

      <!-- 房屋信息 -->
      <div class="area-title">房屋信息</div>
      <div class="info-row">
        <img class="info-img" :src="houseImgUrl" />
        <div class="info-text">
          <div class="data-item">房屋类型：{{ houseInfo.houseType }}</div>
          <div class="data-item">房屋面积：{{ houseInfo.builtArea }}{{ houseInfo.builtArea && 'm²' }}</div>
          <div class="data-item">房屋朝向：{{ houseInfo.orientation }}</div>
          <div class="data-item">物业类型：{{ houseInfo.propertyType }}</div>
          <div class="data-item">房屋号码：{{ houseInfo.houseAddress }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['houseInfo', 'closePopup'])
const { houseInfo } = props
// 转换性别
switch (houseInfo.ownerSex) {
  case '1':
    houseInfo.ownerSex = '男'
    break
  case '2':
    houseInfo.ownerSex = '女'
    break
}
// 转换物业类型
switch (houseInfo.propertyType) {
  case '1':
    houseInfo.propertyType = '居民物业'
    break
  case '2':
    houseInfo.propertyType = '商业物业'
    break
  case '3':
    houseInfo.propertyType = '工业物业'
    break
  case '4':
    houseInfo.propertyType = '其他物业'
    break
}

const ownerImgUrl = houseInfo.ownerImg ? 'http://127.0.0.1:8090/' + houseInfo.ownerImg : '/src/assets/img/noImg.png'

const houseImgUrl = houseInfo.houseImg ? 'http://127.0.0.1:8090/' + houseInfo.houseImg : '/src/assets/img/noImg.png'

const closeClick = () => {
  props.closePopup && props.closePopup()
}
</script>

<style scoped>
.box {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 330px;
}

.pine {
  position: absolute;
  width: 100px;
  height: 100px;
}

.pine::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -83px;
  width: 40%;
  height: 200px;
  border-bottom: 1px solid #38e1ff;
  transform-origin: bottom center;
  transform: rotateZ(135deg) scale(1.5);
  animation: slash 0.5s;
  filter: drop-shadow(1px 0px 2px #03abb4);
}

.box-wrap {
  position: absolute;
  left: 20%;
  top: 0;
  width: 100%;
  background: rgba(56, 225, 255, 0.3);
  border: 1px solid #38e1ff;
  box-shadow: 0 0 10px #29baf1;
  border-radius: 16px;
  padding: 15px;
  animation: slide 0.5s;
}

.close {
  position: absolute;
  top: 8px;
  right: 12px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  text-shadow: 2px 2px 2px #022122;
}

.area-title {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  margin: 10px 0 6px;
  padding-left: 8px;
  border-left: 4px solid #4cdef9;
  text-shadow: 1px 1px 3px #002520;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.info-img {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 0 3px #29baf1;
}

.info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
}

.data-item {
  white-space: nowrap; /* 防止文字溢出,不换行 */
  overflow: hidden;
  text-overflow: ellipsis;/* 文字溢出时显示省略号 */
}

@keyframes slide {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slash {
  0% {
    transform: rotateZ(135deg) scale(0);
  }
  100% {
    transform: rotateZ(135deg) scale(1.5);
  }
}
</style>
